<template>
  <div class="title" :style="{ color: color == 'black' ? '#0F2E4D' : '#fff' }">
    <div class="title-left">
      <div class="tit">{{ title }}</div>
      <div class="titen">{{ tit }}</div>
    </div>
    <div v-if="more" class="title-right" @click="goto">
      更多
      <img src="@/assets/more1.png" alt="" />
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps(["title", "tit", "more", "color"]);
import { useRouter } from "vue-router";

const router = useRouter();
const goto = () => {
  const routeData = router.resolve({
    path: "/newsList",
  });
  if (props.title == "新闻动态") {
    sessionStorage.setItem(
      "newlist",
      JSON.stringify([{ id: "999", name: "新闻动态" }])
    );
  } else if (props.title == "通知公告") {
    sessionStorage.setItem(
      "newlist",
      JSON.stringify([{ id: "998", name: "通知公告" }])
    );
  }
  // sessionStorage.setItem(
  //   "newlist",
  //   JSON.stringify([{ id: "999", name: "工大要闻" }])
  // );
  window.open(routeData.href, "_blank");
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  .tit {
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2.0625rem;
  }
  .titen {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-top: 0.25rem;
  }
  .title-right {
    font-size: 1rem;
    line-height: 1.375rem;
    display: flex;
    align-items: center;
    cursor: pointer;

    img {
      width: 1rem;
      height: 1rem;
    }
  }
}
</style>
